<script lang="ts" setup>
// #region 引入包, 函数和组件
// import { ref } from "vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)

// #endregion

// #region // 变量

// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <router-view v-slot="{ Component }">
    <transition name="app" mode="out-in">
      <Component :is="Component"></Component>
    </transition>
  </router-view>
</template>

<style lang="scss">
// .app {
//   width: 100%;
//   height: 100%;
//   background: #f4f4f4;
// }
.el-message--success .el-message-icon--success {
  width: 20rem !important;
  height: 20rem !important;
  svg {
    width: 20rem !important;
    height: 20rem !important;
  }
}
.app-enter-active,
.app-leave-active {
  transition: all 0.4s ease;
}
.app-enter-active {
  transition-duration: 0.3s;
  transition-delay: 0.1s;
}
.app-leave-to,
.app-enter-from {
  transform: translateY(20rem);
  opacity: 0;
}
</style>
